// let box = (
//   <div>
//     <h1>hello</h1>
//   </div>
// )
// function DemoA() {
//   return box;
// }

// import React from "react";
// function DemoA() {
//   return React.createElement(
//     'div',
//     { key: 1 },
//     [
//       React.createElement('h1',{key:2},['hhh'])
//     ]
//   )
// }
// let box = (
//   <div className="box" title="hehe">
//     <span>dasf</span>
//     <a href="http://ml.com">dfd</a>
//   </div>
// )
// function DemoA() {
//   return React.createElement(
//     'div',
//     { className: 'box', title: 'haha' },
//     [
//       React.createElement('span', { key: 1 }, 'sadasd'),
//       React.createElement('a', { href: "http://ml.com",key:2 },'fsdf')
//     ]
//   )
// }
// let view = React.createElement(
//   'div',
//   { className: 'box', title: 'haha' },
//   [
//     React.createElement('span', { key: 1 }, '我是span'),
//     React.createElement('a', { href: 'http://ml.com', key: 2 }, '码路'),
//   ]
// )
// console.log(view);
// function DemoA() {
//   return view
// }
// let element1 = (<div>我是一个div</div>);
// let element2 = React.createElement('div', {}, ["我是一个div"]);
// console.log(element1);
// console.log(element2);

// function DemoA() {
//   return element1
// }
// function foo() {
//   return `${user.firstname}`
// }
// function DemoA() {
//   return (
//     <div>
//       <h3>{ foo({firstname:"wang"})}</h3>
//     </div>
//   )
// }
// function foo(arg) {
//   if (arg) {
//     return <div>{ arg}</div>
//   } else {
//     return <div>asdadda</div>
//   }
// }
// let ele = <strong>adsd</strong>
// function DemoA() {
//   return (
//     <div>
//       <h3>{foo(110)}</h3>
//       <h3>{foo()}</h3>
//       <h3>{foo('hello')}</h3>
//       <h3>{foo(<span>我是一个span</span>)}</h3>
//       <h3>{foo(ele)}</h3>
//     </div>
//   )
// }
// import React, { Fragment } from "react";

// let a = "box1"
// let b = "box2"
// function DemoA() {
//   return (
//     <div>
//       <div className="box"></div>
//        <div className={a}></div>
//        <div className={`${a} box110 ${b}`}></div>
//        {/* 两个都是静态的，会发生覆盖 */}
//        <div className='box' className='box2'></div>
//        <div className={a} className="box"></div>
//     </div>
//   )
// }

// const ML = {
//   Button() {
//     return (<button>点我</button>)
//   },
//   Form() {
//     return (<div>Form组件</div>)
//   }
// }

// function DemoA() {
//   let { Button, Form } = ML;
//   return (
//     <div>
//       {/* <Ml.Button></Ml.Button>
//       <Ml.Form></Ml.Form> */}

//       <Button></Button>
//       <Form></Form>
//     </div>
//   )
// }

// function Child(props) {
//   let { name, age, address } = props;
//   return (
//     <div>
//       我是子组件 :  {name}  -- {age}  -- {address}
//     </div>
//   )
// }
// function DemoA() {
//   let data = {
//     name: "wc",
//     age: 18,
//     address: "bj"
//   }
//   return (
//     <div>
//       {/* <Child name={data.name} age={data.age} address={data.address}></Child> */}
//       <Child {...data}></Child>
//     </div>
//   )
// }
// function Child(props) {
//   let { children } = props;
//   return (
//     <div>
//       <h2>{ children()}</h2>
//     </div>
//   )
// }
// function DemoA() {

//   return (
//     <div>
//       {/* <Child>你好</Child>
//       <Child>{true}</Child>
//       <Child><div>Hello React~</div></Child>
//       <Child><div>Hello React~</div><span>hello span</span></Child>
//       <Child><div><div>Hello React~</div><span>hello span</span></div></Child> */}
//       <Child>{() => { return 110 }}</Child>
//       <Child>{() => { return (<div>220</div>) }}</Child>
//       <Child>{() => (<div>220</div>)}</Child>
//     </div>
//   )
// }

function DemoA() {
  return (
    <div>
      <div>{["a", "b", "c"]}</div>
      <hr />
      {/* <div>{["a", true, null, undefined, ['bb'], (<div>我是一个div</div>)]}</div> */}
    </div>
  )
}
export default DemoA;